<template>
	<view class="game_header">
		
		<u-navbar bgColor="#1c1b36" height="80rpx" class="haders">
			<view slot="left" class="head_left">
				<u-icon class="off_icon" name="./static/images/jogos/unfold.png" size="48rpx"
					@tap="$store.dispatch('setFlPopup', true)"></u-icon>

			</view>
			<view slot="center" class="head_center">
				<view class="d_logo game_flex game_flex1">
					<u--image :src="require('@/static/title.png')" width="170rpx" height="40rpx" mode="">
					</u--image>
				</view>
			</view>
			<view slot="right" class="head_right game_flex align_center">
				<!-- 已登录 -->
				<view v-if="token" class="d_balance d_border22 d_flex">
					<text class="balance_txt">R$ {{userInfo.money}}</text>
					<text class="balance_btn game_flex game_justify_center align_center"
						@tap="$store.dispatch('setAccessMode'); $store.dispatch('setAccountPopup', true);">
						<u-icon name="minus-square-fill" color="#fff" size="30rpx"></u-icon>
					</text>
					<view class="balance_user game_flex" @tap="$store.dispatch('setUserPopup', true)">
						<u-avatar :src="userInfo.avatar" shape="circle" size="50rpx"></u-avatar>
						<u-icon name="arrow-down" color="#fff" size="25rpx"></u-icon>
					</view>
			
				</view>

				<!-- 未登录 -->
				<view class="not_login game_flex" v-else>
					<u-button :text="$t('jogos.text24')" @tap="setLoginBox(1)" color="#4faff8" type="primary">
					</u-button>

					<u-button :text="$t('jogos.text25')" color="#4180ed" type="primary" size="large"
						@tap="setLoginBox(2)">
					</u-button>
				</view>
				<!-- console.log(e);
				this.lang = e;
				uni.setLocale(e);
				uni.setStorageSync('lang', e);
				this.$i18n.locale = e; -->
				<!-- {{this.lang = uni.getStorageSync('lang') || 'english';}}
				{{$store.state.user.language}} -->
				<!-- 语言选择 -->
				<!-- style="margin: 0 6rpx;" -->
				<view class="game_flex align_center" @tap="showLanguage=true" style="padding-left: 26rpx;">
					<!-- <text class="flag-icon flag-icon-gb q-mr-xs"></text> -->
					<!-- <text style="color: #fff;">{{$store.state.user.language || 'portugal'}}</text> -->
					<!-- <u-icon name="reload" color="#999" size="28rpx"></u-icon> -->
					<!-- {{columns}} -->
					<image style="width: 48rpx;
         height: 48rpx;" v-if="langs== item.id" v-for="(item,ks) in columns[0]" :key="ks"
						:src="item.img">
					</image>

				</view>
		<!-- 		<image src="../../static/brasilia.png"></image> -->
          <!--  <view style="border:3rpx solid red">4444{{langs}}</view> -->
	<text class="alltiempo">{{alltime}}<i></i></text>

			</view>
				
		</u-navbar>


		<!-- 公共 -->
		<game-login :loginIndex="loginIndex" :key="loginIndex" :invitation_code="invitation_code" />
		<game-fl-popup />
		<game-user />
		<game-account />

		<game-animations />

		<!-- 语言选择 -->
		<u-picker :closeOnClickOverlay="true" @close="showLanguage=false" @confirm="confirmLanguage"
			:cancelText="$t('userinfo.text15')" :confirmText="$t('userinfo.text16')" :show="showLanguage"
			:columns="columns" keyName="label"></u-picker>
		<!-- 语言 -->
		<view class="qiehuan" style="position: fixed; top: 0; right: 0;z-index: 100000;">
		    <image src="../../static/fenji.png" mode="" style="width: 60rpx; height: 60rpx;" class="qiehuan-left" @click="btn0K(1)"></image>
		    <image src="../../static/kefu.png" mode="" style="width: 60rpx; height: 60rpx;" class="qiehuan-right" @click="btn0K(2)"></image>
		</view>
	</view>
	
</template>

<script>
	import {forgotEnlaces} from "../../api/login.js"
	import {
		mapGetters
	} from 'vuex'
	export default {
		name: "gameHeader",
		computed: {
			...mapGetters(['userInfo', 'token'])
		},
		created() {
			
			// if (this.getUrlParam('invitation_code')) {
			// 	this.$store.dispatch('setLoginPopup', true)
			// 	this.loginIndex = 2
			// 	this.invitation_code = this.getUrlParam('invitation_code')
			// }
			if (this.getUrlParam('id')) {
				this.$store.dispatch('setLoginPopup', true)
				this.loginIndex = 2
				this.invitation_code = this.getUrlParam('id')
			}
			// 接口
			// console.log("引入了接口-----------------")
			  // 调用 forgotEnlaces 接口
			        forgotEnlaces()
			            .then(response => {
					  this.url_1=response.data.url_1
					  this.url_2=response.data.url_2
			                // 处理接口返回的数据
			                console.log( this.url_1,this.url_2,"response-----------------------");
			            })
			            .catch(error => {
			                // 处理接口调用失败的情况
			                console.error(error);
			            });
						this.getBrasiliaDateTime()
			
		},
		data() {
			return {
				langs: uni.getStorageSync('lang') || 'portugal',
				showLanguage: false,
				url_1:"",
				url_2:"",
				columns: [
					[
						// {label: '中文', id: 'zh'},
						{
							label: 'english',
							id: 'english',
							img: ''
						},
						{
							label: 'spain',
							id: 'spain',
							img: ''
						},
						{
							label: 'portugal',
							id: 'portugal',
							img: '../../static/brasilia.png'
						},
					]
				],
				invitation_code: '',
				loginIndex: 1,
				alltime:""
			};
		},
		  mounted() {
		    this.getBrasiliaDateTime(); // 初始化时间
		
		    // 每秒更新时间
		    setInterval(() => {
		      this.getBrasiliaDateTime();
		    }, 1000);
		  },
		
		methods: {
			// 获取巴西利亚的时间
			// 创建一个函数来获取巴西利亚的当前时间（包括日期、时、分、秒）
			 getBrasiliaDateTime() {
			    // 创建一个新的 Date 对象
			    let date = new Date();
			    // 设置巴西利亚的时区偏移量（以分钟为单位）
			    let brasiliaOffset = -660; // 巴西利亚时间（不考虑夏令时）
			    // 根据时区偏移量调整时间
			    date.setMinutes(date.getMinutes() + brasiliaOffset);
			    // 格式化日期、时、分、秒
			    let formattedDateTime = `${date.getFullYear()}-${('0' + (date.getMonth() + 1)).slice(-2)}-${('0' + date.getDate()).slice(-2)} ${('0' + date.getHours()).slice(-2)}:${('0' + date.getMinutes()).slice(-2)}:${('0' + date.getSeconds()).slice(-2)}`;
			    this.alltime=formattedDateTime
			    
			},
			//
			btn0K(type){
			
				// // 飞机
				if(type==1){
					window.location.href=this.url_1
					
				}else if(type==2){
					window.location.href=this.url_2
				}
				
			},
			confirmLanguage({
				value
			}) {
				const info = value[0].id
				this.$store.dispatch('Language', info).then(() => {
					
					uni.setLocale(info);
					uni.setStorageSync('lang', info);
					this.$i18n.locale = info;
					this.showLanguage = false;
					window.location.reload();
				})
			},
			// 如果检测有pid 打开注册弹窗
			getUrlParam(param) {
				const options = uni.getLaunchOptionsSync();
				if (options.query && options.query[param]) {
					return options.query[param];
				}
				return null;
			},

			setLoginBox(index) {
				this.$store.dispatch('setLoginPopup', true)
				this.loginIndex = index
			}
		},

	}
</script>

<style lang="scss" scoped>
	.game_header {
		.head_left {}

		.head_center {
			padding-left: 80rpx;
			width: 100%;

			.d_logo {
				padding: 10rpx 0 0 10rpx;
			}
		}

		.head_right {
			.d_balance {
				padding: 15rpx 20rpx;
				color: #fff;
				justify-content: space-between;
				align-items: center;

				.balance_txt {
					color: #f6c530;
					font-weight: 700;
				}

				.balance_btn {
					margin: 0 20rpx;
					width: 70rpx;
					height: 35rpx;
					background-color: #ff3141;
					box-shadow: 0 0 #ff3141;
					border-radius: 12rpx;
					cursor: pointer;
					animation: grape 1.5s ease 0s infinite normal none running;
				}

				.balance_user {
					padding-right: 10rpx;
					width: 100rpx;
					border-radius: 45rpx;
					background-color: #3d3838;
					justify-content: space-between;
					cursor: pointer;
				}
			}

			margin-left: 170rpx;

			.not_login {
				.u-button {
					height: 50rpx;
					border: none;
					color: #fff;
				}

				.u-button:last-child {
					margin-left: 20rpx;
				}
			}
		}
	}

	@keyframes grape {
		0% {
			transform: scale(1);
		}

		10% {
			transform: translate3d(-1px, 0, 0);
		}

		70% {
			box-shadow: 0 0 0 10px transparent;
			transform: scale(1);
		}

		100% {
			box-shadow: 0 0 transparent;
			transform: scale(1);
		}
	}


	.flag-icon-gb {
		background-image: url();
	}

	.flag-icon {
		position: relative;
		display: inline-block;
		width: 1.33333333em;
		line-height: 1em;
	}

	.q-mr-xs {
		margin-right: 4px;
		
	}

	.qiehuan-left{
		position: fixed;
		top: 73vh;
		right: 0;
		z-index: 10000;
	}
	.qiehuan-right{
		position: fixed;
		top: 80vh;
		right: 0;
		z-index: 10000;
	}
	.alltiempo{
		display: block;
		position: absolute;
		text-align: right;
		right: 0;
		top: 70rpx;
		font-size: 30rpx;
		width: 100vw;
		background-color: #1c1b36;
		color:#fff
		// padding-bottom: 10rpx;
	}
	.alltiempo i{
		margin-left: 12rpx;
		
	}
	.haders{
	
		position: relative;
	}
</style>